<template>
  <div class="workmessage">
        <span class="title">作品信息</span>
        <hr class="hr" width="95%" align="left"  color="lightgrey" size="1"/>
        <div class="formbox">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
          <el-form-item prop="name" required="true" label="作品名称">
            <el-input placeholder="请输入作品名称" v-model="ruleForm.name" ></el-input>
          </el-form-item>

          <el-form-item prop="type" required="true" label="作品类型">
            <el-select v-model="ruleForm.type" placeholder="请选择作品类型" >
             
              <el-option v-for="item in options" :value="item.label" :key="item.value" >
             {{ item.label }}</el-option>
           </el-select>
          <!-- <span>Selected: {{ ruleForm.type}}</span> --> 
          </el-form-item>

          <el-form-item prop="price" required="true" label="作品价格">
            <el-input placeholder="请设置作品价格" v-model="ruleForm.price" ></el-input>
          </el-form-item>

          <el-form-item label="作品说明">
            <el-input  v-model="ruleForm.description" placeholder="请输入作品说明"></el-input>
          </el-form-item>

          <el-form-item>
            <button class="button1" @click="turntostep2()">确定</button>
          </el-form-item>
        </el-form>
        </div>
  </div>
</template>

<script>
export default {
  name: "Create_1",
  data() {
      return {
        ruleForm: {
          name: '',
          type: '',
          price: '',
          description: ''},
        rules: {
          name: [
            { required: true, message: '请输入作品名称', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1到 30 个字符', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择作品类型', trigger: 'change' }
          ],
          price: [
            { required: true, message: '请设置作品价格', trigger: 'blur' } 
          ]
          },

        options: [
        { label: "图片", value: 'picture' },
        { label: "视频", value: 'video' },
        { label: "音频", value: 'audio' },
        { label: "文本", value: 'text' }
        ],
        //count:"",//倒计时
      }  
      },
  methods:{
    turntostep2(){
        this.$router.push("/create_2/")
    }
   }
};

</script>

<style scoped>
.workmessage
{
  height: 420px;
  width: 80%;
  background:rgb(255, 255, 255);
  position: absolute;
  top:23%;
  left:10%;
  border-radius: 10px;
}
.hr{
  position: relative;
  top:12%;
  left:2%;
}
.title
{
  position: absolute;
  top:5%;
  left:2%;
  font-weight:400 ;
  font-size: 18px;
  color: rgb(78, 78, 78);
}
.formbox{
  width:580px;
  position: relative;
  top:20%;
  left:5%;
}

.button1{
  background-color: rgb(255, 227, 0); /* Green */
    border: none;
    color: rgb(54, 54, 54);
    padding: 10px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    border-radius: 2px;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.19);
}
</style>